<template>
	<div class="pageContacts overHid">
		<div class="pageContactsMainBox" v-loading="ListLoading">
			<div class="items " v-for="value,index in ContactList" :key="value.contactId">
				<div class="itemLeft" v-if="value.userId==storeUserinfo.Id">
					<el-image class="width50  height50 borderr50 marginR5" :src="value.otherUrl+'?w=200&h=200&q=75'"
						fit="fill">
						<div slot="error" class="image-slot">
							<el-image class="width50  height50 borderr50 marginR5"
								:src="$handledImageError(value.otherUrl,'tx')" fit="fill">
							</el-image>
						</div>
					</el-image>
					<div class="itemMiddle textLeft marginL5">
						<div class="overflow font18">
							{{value.otherUsername}}
						</div>
						<div class="overflow font14">
							{{value.msg}}
						</div>
					</div>
				</div>
				<div class="itemLeft" v-else="value.otherId==storeUserinfo.Id">
					<el-image class="width50  height50 borderr50 marginR5" :src="value.url+'?w=200&h=200&q=75'"
						fit="fill">
						<div slot="error" class="image-slot">
							<el-image class="width50  height50 borderr50 marginR5"
								:src="$handledImageError(value.url,'tx')" fit="fill">
							</el-image>
						</div>
					</el-image>
					<div class="itemMiddle textLeft marginL5">
						<div class="overflow font18">
							{{value.username}}
						</div>
						<div class="overflow font14">
							{{value.msg}}
						</div>
					</div>
				</div>
				<div class="itemRight">
					<template v-if="value.status===4">
						<span class="color-smill">已删除</span>
					</template>
					<template v-else-if="value.status===0">
						<span class="color-smill">已过期</span>
					</template>
					<template v-else-if="value.isAgree===1 && value.otherId==storeUserinfo.Id">
						<span class="color-smill">^已添加</span>
					</template>
					<template v-else-if="value.isAgree===1 ">
						<span class="color-smill">已添加</span>
					</template>
					<template v-else-if="value.isAgree===0 && value.otherId==storeUserinfo.Id">
						<span class="color-smill">等待验证</span>
					</template>
					<template v-else>
						<el-button class="contentDownAgree" size='mini' type="primary"
							@click="handleAgree(value.contactId,index,value.userId,value.otherId)">接受</el-button>
					</template>
				</div>
			</div>
			<div class=" textCenter color-smill cursorPointer" v-show="msgConfig.msglistResults"
				@click="handleChandeMore">查看更多</div>
			<template v-if="ContactList.length===0">
				<div class="textCenter color-smill marginT15">暂无数据</div>
			</template>
		</div>
		
	</div>
</template>

<script>
	import sessionStorage from "@/utils/session.js"
	import {
		getContacts,
		ContactAgree
	} from '@/api/relationshipUser.js'
	import {
		debounce
	} from "@/utils/common.js";
	export default {
		name: "pageContacts",
		props: {
			isGetList: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				ListLoading:false,
				ContactList: [{
					contactId: 1,
					userId: 8,
					otherUsername: "admin",
					otherUrl: "http://127.0.0.1:3000/images/root.webp",
					otherId: 13,
					status: 1, //过期处理 0过期 1未
					msg: "admin请求添加你为好友", //附带消息
					isAgree: 0, //0未处理 1已处理 
				}],
				msgConfig: {
					minScrollBottom: 100, //距离msg底部height 小于？就查询
					isExecuteShowMore: false, //距离msg？部height
					msglistResults: false, //msg查询结果 false 终止查询
				},
				pageConfig: {
					pageSizes: 10, //条数
					pageNum: 1, //页数 第n页
				},
			}
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo;
			},
		},
		methods: {
			/**
			 * 查看更多
			 **/
			handleChandeMore() {
				this.pageConfig.pageNum += 1
				this.msgConfig.msglistResults = false
				this.handledGetList(true)
			},
			// 请求新的朋友的数据列表
			handlerGetContacts(code = false) {
				if (!code) {
					this.ContactList = [];
				}
				let fromId = this.storeUserinfo.Id ? this.storeUserinfo.Id : JSON.parse(sessionStorage.getSession(
					"shsUserInfo")).Id
				this.ListLoading = true;
				getContacts({
					fromId,...this.pageConfig
				}).then(data => {
					this.ListLoading = false;
					let list = data.data;
					this.msgConfig.isExecuteShowMore = false
					if (list.length == 0 || list.length < this.pageConfig.pageSizes) {
						this.msgConfig.msglistResults = false
					} else {
						this.msgConfig.msglistResults = true
					}
					this.msgConfig.isExecuteShowMore = true
					//逻辑处理

					if (!code) {
						this.ContactList = list
					} else {
						this.ContactList = [...this.ContactList, ...list]
					}
				}).catch(err => {
					this.ListLoading = false;
				})
			},
			//同意添加好友
			handleAgree: debounce(function(contactId, index, fromId, otherId) {
				ContactAgree({
					contactId,
					fromId, //
					otherId, //,
					userUsername: this.storeUserinfo.username
				}).then(data => {
					this.ContactList[index].isAgree = 1
					//重新请求联系人列表
					this.$store.commit("setIsGetRelationshiplist", true)
				})
			})

		},
		watch: {
			"isGetList": {
				deep: true, // 深度监听
				handler: function(newVal, oldVal) { // 监听属性的回调方法
					if (newVal) {
						this.$nextTick(() => {
							this.pageConfig.pageNum = 1
							this.msgConfig.msglistResults = false
							this.handlerGetContacts();
						})
					}
				},
				immediate: true // 页面初始化时是否触发回调
			}
		}
	}
</script>

<style scoped>
	.pageContacts {
		width: 400px;
		padding: 0 10px;
		box-sizing: border-box;
	}


	.items {
		display: flex;
		justify-content: space-around;
		margin: 12px 0;
		align-items: center;
		border-radius: 8px;
	}

	.items:hover {
		background-color: #A0E9FF;
	}

	.itemLeft {
		display: flex;
		justify-content: flex-start;
	}

	.itemMiddle {
		width: 240px;
	}
</style>